/*
 * 商家创建
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: ljb
 * @Last Modified time: 2018-10-19 16:28:16
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-customer-create {
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
		.formValidate {
			max-width: 500px;
		}
    }

</style>
<template>
	<div
		:style="{'max-height':formMaxHeight(true)}"
		class="v-admin-customer-create">
		<div>
			<Row
				type="flex"
				justify="start">
				<i-col push="1">
					<Form
						ref="formValidate"
						:model="formValidate"
						:rules="ruleValidate"
						:label-width="labelWidth(100,160)"
						class="formValidate"
						name="create-form">

						<Form-item
							:label="$t('customer.wechat_id')"
							prop="authorizer_id">
							<Row>
								<i-col span="22">
									<Select
										v-model="formValidate.authorizer_id"
										clearable
										filterable
										name="create-authorizer_id">
										<Option
											v-for="authorizer in authorizers"
											:value="authorizer.id + ''"
											:key="authorizer.id">{{ authorizer.nick_name }}</Option>
									</Select>
								</i-col>
								<i-col
									span="1"
									offset="1">
									<Tooltip
										:content="$t('customer.auth_tip')"
										placement="right">
										<a
											href="//mirror.xiaojingxiuxiu.com/open-wechat/pre-auth-url"
											target="_blank"
											class="help">
											<Icon
												type="help-circled"
												size="20"/>
										</a>
									</Tooltip>
								</i-col>
							</Row>
						</Form-item>

						<Form-item
							:label="$t('customer.languages')"
							prop="languages">
							<Select
								v-model="formValidate.languages"
								clearable
								filterable
								name="create-languages"
								@on-change="changeLanguages">
								<Option
									v-for="( item , key ) in languages"
									:value="String(item.id)"
									:key="key">{{ item.name }}</Option>
							</Select>
						</Form-item>

						<Form-item
							:label="$t('customer.name')"
							prop="name">
							<i-input
								v-model="formValidate.name"
								:placeholder="$t('customer.please_enter_name')"
								type="text"
								name="create-name"/>
						</Form-item>

						<Form-item
							:label="$t('customer.account')"
							prop="account">
							<i-input
								v-model="formValidate.account"
								:placeholder="$t('customer.please_enter_account')"
								type="text"
								name="create-account"/>
						</Form-item>

						<Form-item
							:label="$t('customer.password')"
							prop="password">
							<i-input
								v-if="!show_password"
								v-model="formValidate.password"
								:placeholder="$t('customer.please_enter_password')"
								type="password"
								icon="eye"
								name="create-password"
								@on-click="showPassword()"/>
							<i-input
								v-else
								v-model="formValidate.password"
								:placeholder="$t('customer.please_enter_password')"
								type="text"
								icon="eye"
								name="create-password"
								@on-click="showPassword()"/>
						</Form-item>

						<Form-item
							:label="$t('customer.email')"
							prop="email">
							<AutoComplete
								v-model="formValidate.email"
								:placeholder="$t('customer.please_enter_account')"
								name="create-email"
								@on-search="handleSearch">
								<Option
									v-for="item in email_suffixs"
									:value="item"
									:key="item">{{ item }}</Option>
							</AutoComplete>
						</Form-item>

						<Form-item
							:label="$t('customer.category')"
							prop="operate_category">
							<Row>
								<i-col span="22">
									<Select
										v-model="formValidate.operate_category"
										name="create-operate_category"
										multiple
										clearable
										filterable
										transfer>
										<Option
											v-for="category in categories"
											:value="category.id + ''"
											:key="category.id + ''">{{ category.name }}</Option>
									</Select>
								</i-col>
								<i-col
									span="1"
									offset="1">
									<Button
										type="primary"
										@click="selectAll">
										{{ !select_all ? this.$t('common.select_all') : this.$t('common.cancel') }}
									</Button>
								</i-col>
							</Row>
						</Form-item>

						<Form-item
							:label="$t('customer.legal_person')"
							prop="legal_person">
							<i-input
								v-model="formValidate.legal_person"
								:placeholder="$t('customer.please_enter_person')"
								name="create-legal_person"
								type="text"/>
						</Form-item>

						<Form-item
							:label="$t('customer.telephone')"
							prop="telephone">
							<i-input
								v-model="formValidate.telephone"
								:placeholder="$t('customer.please_enter_tel')"
								name="create-telephone"
								type="text"/>
						</Form-item>

						<Form-item
							:label="$t('customer.contacts')"
							prop="contacts">
							<i-input
								v-model="formValidate.contacts"
								:placeholder="$t('customer.please_enter_contacts')"
								name="create-contacts"
								type="text"/>
						</Form-item>

						<Form-item
							:label="$t('customer.phone')"
							prop="phone">
							<i-input
								v-model="formValidate.phone"
								:placeholder="$t('customer.please_enter_phone')"
								name="create-phone"
								type="text"/>
						</Form-item>

						<Form-item
							:label="$t('customer.license')"
							prop="license">
							<Uploader
								ref="license"
								@on-remove="(file)=>{handleRemove('license',file)}"
								@on-change="(file)=>{handleChange('license',file)}">
								{{ $t('common.pic_tip') }}
							</Uploader>
						</Form-item>

						<Form-item
							:label="$t('customer.water_mark')"
							prop="water_mark">
							<Uploader
								ref="water_mark"
								@on-remove="(file)=>{handleRemove('water_mark',file)}"
								@on-change="(file)=>{handleChange('water_mark',file)}">
								{{ $t('common.pic_tip') }}
							</Uploader>
						</Form-item>

						<Form-item
							v-if="$i18n.locale === 'zh-CN' && formValidate.languages === 'zh-CN'"
							:label="$t('customer.area')"
							prop="resArr">
							<areaSelector
								v-model="formValidate.resArr"
								:gutter="0"
								searchable
								data-type="name"
								auto
								level="2"
								name="create-resArr"/>
						</Form-item>

						<Form-item
							:label="$t('customer.address')"
							prop="address">
							<i-input
								v-model="formValidate.address"
								:placeholder="$t('customer.please_enter_address')"
								name="create-address"
								type="text"/>
						</Form-item>

						<Form-item
							:label="$t('customer.provider_type')"
							prop="provider_type">
							<RadioGroup
								v-model="formValidate.provider_type"
								name="create-provider_type">
								<Radio label="2">
									<span>{{ $t('customer.general_customer') }}</span>
								</Radio>
								<Radio label="1">
									<span>{{ $t('customer.virtual_provider') }}</span>
								</Radio>
								<!-- <Radio label="3">
									<span>{{ $t('customer.bought_software_customer') }}</span>
								</Radio> -->
							</RadioGroup>
						</Form-item>

						<!-- <Form-item
							v-if="String(formValidate.provider_type) === '3'"
							:label="$t('customer.dev_acnt_num')"
							prop="dev_acnt_num">
							<InputNumber
								:min="0"
								v-model="formValidate.dev_acnt_num"
								:placeholder="$t('customer.please_enter_account')"
								name="create-dev_acnt_num"/>
						</Form-item> -->

						<!-- <Form-item
							v-if="String(formValidate.provider_type) !== '1'"
							:label="$t('customer.show_virtual')"
							prop="show_virtual">
							<i-switch
								v-model="formValidate.show_virtual"
								true-value="1"
								false-value="0"
								name="create-show_virtual">
								<Icon
									slot="open"
									type="android-done"/>
								<Icon
									slot="close"
									type="android-close"/>
							</i-switch>
						</Form-item> -->

						<Form-item
							v-if="String(formValidate.provider_type) !== '1'"
							:label="$t('customer.has_youzan')"
							prop="has_youzan">
							<i-switch
								v-model="formValidate.has_youzan"
								true-value="1"
								false-value="0"
								name="create-has_youzan">
								<Icon
									slot="open"
									type="android-done"/>
								<Icon
									slot="close"
									type="android-close"/>
							</i-switch>
						</Form-item>

						<!-- <Form-item
							v-if="Number(formValidate.has_youzan) !== 0"
							:label="$t('customer.youzan_store')"
							prop="youzan_authorizer_id">
							<Select
								v-model="formValidate.youzan_authorizer_id"
								clearable
								filterable>
								<Option
									v-for="( authorizer , key ) in youzanAuthorizers"
									:value="String(authorizer.id)"
									:key="key">{{ authorizer.youzan_store_name }}</Option>
							</Select>
						</Form-item> -->

						<Form-item
							:label="$t('customer.is_debug')"
							prop="is_debug">
							<i-switch
								v-model="formValidate.is_debug"
								true-value="1"
								false-value="0"
								name="create-has_hair">
								<Icon
									slot="open"
									type="android-done"/>
								<Icon
									slot="close"
									type="android-close"/>
							</i-switch>
						</Form-item>

						<Form-item>
							<Button
								type="primary"
								@click="handleSubmit('formValidate')">
								{{ $t('common.submit') }}
							</Button>
							<Button
								type="ghost"
								style="margin-left: 8px"
								@click="handleReset('formValidate')">
								{{ $t('common.reset') }}
							</Button>
						</Form-item>

					</Form>
				</i-col>
			</Row>
		</div>

	</div>
</template>

<script>
import { validatePhone } from 'src/validate'; // 引入校验文件
import { showLocalImage } from 'src/views/mixins/showLocalImage'; // 引入公共的mixins
import labelWidthMixin from 'src/views/mixins/labelWidthMixin'; // 引入公共的mixins
import { computedFormMaxHeight } from 'src/views/mixins/computedFormMaxHeight'; // 引入公共的mixins
import areaSelector from 'src/views/component/area-selector';
import { setLanguageOptions } from 'src/i18n'; // 引入多语言文件
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'AdminCustomerCreate',

	components: {
		areaSelector,
		Uploader,
	},

	mixins: [showLocalImage, labelWidthMixin, computedFormMaxHeight],

	props: {
		authorizers: {
			type: Array,
			default() {
				return [];
			},
		},
		categories: {
			type: Array,
			default() {
				return [];
			},
		},
		languages: {
			type: Array,
			default() {
				return [];
			},
		},
		youzanAuthorizers: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {
			email_suffixs: [], // 自动补全email后缀

			show_password: false, // 是否为明文密码

			formValidate: {
				authorizer_id: '0', // 对应服务公众号

				name: '', // 客户姓名

				account: '', // 账号

				password: '', // 密码

				email: '',

				legal_person: '', // 公司法人

				telephone: '', // 公司电话

				contacts: '', // 联系人

				phone: '', // 联系人电话

				license: '', // 营业执照

				water_mark: '', // 水印图片

				resArr: [],	// 存储省市区数组

				address: '', // 地址

				provider_type: '2', // 代理商户类型

				operate_category: [], // 可选商品分类数组

				is_debug: '0', // 是否是测试账号

				show_virtual: '0', // 是否显示虚拟仓

				dev_acnt_num: 0, // 购买软件客户设备账号开通的个数

				languages: 'zh-CN', // 语言选择

				enPhone: '',

				has_youzan: '0',		// 是否开通有赞
			}, // 新增代理客户表单

			select_all: false,	// 选择全部

			ruleValidate: { // 验证表单数据规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.name') }),
						trigger: 'blur,change',
					},
				],
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.password') }),
						trigger: 'blur,change',
					},
					{
						type: 'string',
						min: 6,
						message: this.$t('customer.password_length'),
						trigger: 'blur,change',
					},

				],
				operate_category: [
					{
						required: true,
						type: 'array',
						message: this.$t('validate.required', { field: this.$t('customer.category') }),
						trigger: 'blur,change',
					},
				],
				email: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.email') }),
						trigger: 'blur,change',
					},
					{
						type: 'email',
						message: this.$t('validate.email', { field: this.$t('customer.email') }),
						trigger: 'blur,change',
					},
				],
				legal_person: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.legal_person') }),
						trigger: 'blur,change',
					},
				],
				telephone: [
					{
						required: true, validator: validatePhone, trigger: 'blur,change', validateType: 'create',
					},
				],
				phone: [
					{
						required: true, trigger: 'blur,change', validateType: 'create', validator: validatePhone,
					},
				],
				languages: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.languages') }),
						trigger: 'blur,change',
					},
				],
				contacts: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.contacts') }),
						trigger: 'blur,change',
					},
				],
				resArr: [
					{
						required: false,
						type: 'array',
						message: this.$t('validate.required', { field: this.$t('customer.area') }),
						trigger: 'blur,change',
					},
				],
				address: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.address') }),
						trigger: 'blur,change',
					},
				],
				license: [
					// { validator: validateImage, trigger: 'blur,change' },
				],
				provider_type: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.provider_type') }),
						trigger: 'blur,change',
					},
				],
				is_debug: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.has_hair') }),
						trigger: 'blur,change',
					},
				],
				dev_acnt_num: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('customer.dev_acnt_num') }),
						trigger: 'blur,change',
					},
				],
				has_youzan: [
					{
						// required: true,
						message: this.$t('validate.required', { field: this.$t('customer.has_youzan') }),
						trigger: 'blur,change',
					},
				],
			},
		};
	},
	methods: {

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			this.$refs.formValidate.validateField(field);
		},

		/**
		 * 删除图片
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			this.$refs.formValidate.validateField(field);
		},

		/**
		 * 选择语言选项
		 * @param {String} value {选中的值}
		 * @return {undefined}
		 */
		changeLanguages(value) {
			setLanguageOptions(value);
		},

		/**
		 * 产品分类全选
		 * @return {undefined}
		 */
		selectAll() {
			this.select_all = !this.select_all;
			if (this.select_all) {
				this.formValidate.operate_category = this.categories.map(categorie => String(categorie.id));
			} else {
				this.formValidate.operate_category = [];
			}
		},

		/**
         * 邮箱拼接自动补全的数据
         * @param  {string} value {输入的数据}
         * @return {undefined}
         */
		handleSearch(value) {
			this.email_suffixs = !value || value.indexOf('@') >= 0 ? [] : [
				`${value}@qq.com`,
				`${value}@sina.com`,
				`${value}@163.com`,
				`${value}@163.net`,
				`${value}@gmail.com`,
				`${value}@yahoo.com`,
				`${value}@msn.com`,
				`${value}@hotmail.com`,
				`${value}@aol.com`,
				`${value}@ask.com`,
				`${value}@live.com`,
			];
		},

		/**
         * 账号密码显示与隐藏
         * @return {undefined}
         */
		showPassword() {
			this.show_password = !this.show_password;
		},

		/**
         * 提交表单
         * @param  {string} name {表单上的ref值}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.handleData();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs.water_mark.reset();
			this.$refs.license.reset();
			this.$refs[name].resetFields();
			this.formValidate.resArr = [];
		},

		/**
         * 父子组件通信传递数据
         * @return {undefined}
         */
		handleData() {
			const form_data = this.formDataCreate();
			this.$emit('post', form_data);
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataCreate() {
			const new_object = {
				authorizer_id: this.formValidate.authorizer_id || 0,

				name: this.formValidate.name,

				account: this.formValidate.account,

				password: this.formValidate.password,

				email: this.formValidate.email,

				legal_person: this.formValidate.legal_person,

				telephone: this.formValidate.telephone,

				contacts: this.formValidate.contacts,

				phone: this.formValidate.phone,

				license: this.formValidate.license,

				province: this.formValidate.resArr[0],

				city: this.formValidate.resArr[1],

				district: this.formValidate.resArr[2],

				address: this.formValidate.address,

				provider_type: this.formValidate.provider_type,

				operate_category: this.formValidate.operate_category,

				is_debug: this.formValidate.is_debug,

				// dev_acnt_num: this.formValidate.dev_acnt_num,

				show_virtual: this.formValidate.show_virtual,

				// 补充
				language: this.formValidate.languages,
				water_mark: this.formValidate.water_mark,
				has_youzan: this.formValidate.has_youzan,
			};
			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				switch (key) {
				case 'operate_category':

					new_object[key].forEach((category, index) => {
						form_data.append(`${key}[${index}]`, category);
					});
					break;

				default:
					if (typeof new_object[key] !== 'undefined' && new_object[key]) {
						form_data.append(key, new_object[key]);
					}

					break;
				}
			});

			return form_data;
		},

	},
};
</script>
